<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title v-text="'赛事说明-'+matchInfo.name"></title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/competition.css" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script> 
		<script src="{$staticHost}/static/js/vue.min.js"></script>
	</head>
	<body v-bind:class="{'style-two':matchInfo.template_id==1,'style-three':matchInfo.template_id==2}">
		<div id="style-one" class="oh" style="padding-bottom:100px;">
			<div class="banner">
				<img v-bind:src="matchInfo.banner_src" />
			</div>
			<h3 class="c-expalain"><span>赛事说明</span></h3>
			<section class="image-text" v-html="matchInfo.introduce"></section>
			<p class="p10 ac color_gray f13">
				本活动最终解释权归虎扑跑步所有
			</p>
		    <a class="dow-app color-blue" href="http://mobile.hupu.com/download/joggers?r=share">
			下载虎扑跑步APP参加 精彩活动
			</a>
		</div>
        <script>
            var match_id = "{$match_id}";
            var sup = typeof jw === "object";
			if(sup){
			    	$(".dow-app").hide();
			    }
            new Vue({
                el: 'html',
                data:{
                    matchInfo:{}
                },
                created: function(){
                    var self = this
                    $.getJSON('{$staticHost}/matchWeb/matchInfo',{ match_id:match_id }, function(data, error) {
                        self.matchInfo = data.result.matchInfo
                    });
                }
            })
        </script>
	</body>
{template 'show/web-footer'}